/*
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-02-13 17:11:51
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-07-04 17:48:10
 * @FilePath: \cxl-h5\src\components\watermark\index.ts
 */
export class Watermark {
    canvas: HTMLCanvasElement
    box: any
    ctx: CanvasRenderingContext2D
    boxHeight: any //盒子高度
    windowHeight: number //屏幕高度
    windowWidth: number //屏幕的宽度
    width: number //水印的宽度
    height: number //水印的高度
    constructor(id: string) {
        this.windowHeight = window.innerHeight * 2
        this.windowWidth = window.innerWidth * 2
        this.width = this.windowWidth / 2 //一行放3个
        this.height = this.windowHeight / 2 //一个屏幕高度放2
        this.box = document.querySelector('.report-box') as HTMLElement
        this.boxHeight = this.box.offsetHeight * 2
        this.canvas = document.querySelector('#' + id) as HTMLCanvasElement
        this.canvas.width = this.windowWidth
        this.canvas.height = this.boxHeight
        this.ctx = this.canvas?.getContext('2d') as CanvasRenderingContext2D
        this.draw()
    }
    draw() {
        this.ctx.font = '24px Arial'
        this.ctx.textBaseline = 'top'
        this.ctx.textAlign = 'center'
        this.ctx.fillStyle = 'rgba(0,0,0,0.15)'
        for (let x = 0; x < 2; x++) {
            for (let y = 1; y <= Math.ceil(this.boxHeight / this.height); y++) {
                this.ctx?.save()
                // this.ctx?.beginPath()
                this.ctx?.setTransform()
                this.ctx?.translate(x * this.width + this.windowWidth / 4, y * this.height - this.height / 2)
                this.ctx?.rotate((Math.PI / 180) * -30)
                this.ctx?.fillText('车生活', 0, 0)
                // this.ctx?.closePath()
                this.ctx?.restore()
            }
        }
        console.log(this.ctx)
        // this.box.style.backgroundImage =
    }
}
